<template>
    <el-card style="width: 60%" title="事件统计">
      <el-button type="primary" :icon="Close" @click="handleClose" style="float: right; margin-top: -5px; margin-right: -5px;"></el-button>
        <el-segmented v-model="Chartvalue" :options="ChartType" />
        <div style="display: flex">
            <template v-if="Chartvalue === 'line'">
                <el-radio-group v-model="radio" vertical>
                    <el-radio-button label="月统计" value="month" />
                    <el-radio-button label="年统计" value="year" />
                </el-radio-group>
                <div style="width: 100%; height: 400px">
                    <v-chart :option=lineData></v-chart>
                </div>
            </template>
            <template v-else>
                <div style="width: 100%; height: 400px">
                    <v-chart :option="PieChart"></v-chart>
                </div>
            </template>
        </div>
    </el-card>
</template>

<script setup>
import { ref, watch, computed } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { useCommonStore } from '@/stores/common'
import { storeToRefs } from 'pinia'
import { renderChart, LineChartMonth, LineChartYear, PieChart } from './hook/allChart.js'

/* 引入公共状态管理对象 */
const store = useCommonStore()
const { allChartFlag } = storeToRefs(store)
const innerVisible = ref(false)
watch (() => allChartFlag, val => {
  innerVisible.value = val
})
renderChart()

const ChartType = [
  {
    label: '事件统计折线图',
    value: "line"
  },
  {
    label: '事件统计饼图',
    value: "pie"
  }
]
const Chartvalue = ref(ChartType[0].value)
const radio = ref('month')
const lineData = computed(() => {
  if (radio.value === 'month') {
    return LineChartMonth
  } else {
    return LineChartYear
  }
})
const handleClose = () => {
  allChartFlag.value = false
}
</script>

<style>
.el-card{
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: auto;
  z-index: 9999;
}
.el-segmented{
  margin-bottom: 10px;
}
.el-radio-group {
  position: absolute;
  right: 10px;
  top: 30%;
  z-index: 999;
}
.el-radio-button:first-child {
  position: absolute;
  top: 40px;
  z-index: 999;
}
</style>